<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <title>支付</title>
</head>

<body>

  <h3>测试支付，目前包含了 支付宝PC网页，支付宝WAP。微信H5，微信公众号，微信扫码</h3>
  <table>
    <tr>
      <td>
        订单编号：#(order.number)
      </td>
      <td>
        订单价格：#(order.amount)
      </td>
      <td>
        #(DicCacheStatic.getDicInfo('SHOP_ORDER_STATUS',order.status).name)
      </td>
    </tr>
  </table>
  <p>
    <input type="radio" name="payType" value="pay_alipay"><label for="">支付宝</label>
    <br />
    <input type="radio" name="payType" value="pay_wxpay"><label for="">微信</label>
    <br />
    <a href="javascript:doPay();">去支付</a>
  </p>

  <script src="#(ctx_path)/plugins/jquery/1.11.3/jquery.min.js"></script>
  <script src="#(ctx_path)/plugins/layer_mobile/layer.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

  <script type="text/javascript">
    var isMobileDevice = "#(isMobileDevice)";
    var isWeChat = "#(isWeChat)";

    //手机网站支付
    function wx_MWEB(data) {
      var mweb_url = data.mweb_url;
      window.location.href = mweb_url;
    }

    //二维码支付
    function wx_NATIVE(data) {
      var code_url = data.code_url;

      var qrCode = "#(ctx_path)/qrCode?width=150&height=150&qrCodeContent=" + code_url;

      var qrcodeHtml = "<img src='" + qrCode + "'>";
      layer.open({
        content: qrcodeHtml,
        btn: ['我已支付'],
        yes: function (index) {
          // 支付成功后的回调函数
          window.location.href = "#(ctx_path)/paySuccess?out_trade_no=#(order.number)";
        }
      });
    }

    //公众号支付,public acount
    function wx_JSAPI(data) {

      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', data.packageParams,
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            // 支付成功后的回调函数
            window.location.href = "#(ctx_path)/paySuccess?out_trade_no=#(order.number)";
          }
        });
    }

    function doPay() {
      var payType = $(":input[name='payType']:checked").val();
      if (payType == "" || payType == undefined) {
        layer.open({
          style: 'width:60%;',
          content: "请选择支付方式",
          btn: '确定',
          yes: function (index) {
            layer.close(index);
          }
        });
        return;
      }

      if (payType == "pay_alipay") {
        window.location.href = "#(ctx_path)/alipay?orderId=#(order.id)";
      } else if (payType == "pay_wxpay") {

        //微信有三种支付方式
        $.ajax({
          type: 'get',
          url: '#(ctx_path)/wepay',
          data: "orderId=#(order.id)",
          success: function (rep) {

            console.log(rep);
            if (rep.code == "0") {
              var data = rep.data;
              if (data.trade_type == 'MWEB') {
                wx_MWEB(data);
              } else if (data.trade_type == 'JSAPI') {
                wx_JSAPI(data);
              } else if (data.trade_type == 'NATIVE') {
                wx_NATIVE(data);
              }
            } else {
              console.log(rep);
            }

          }
        });


      }

    }

    
  </script>
</body>

</html>